<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>设置元素属性</title>
	<style type="text/css">
	#dv{
		width:200px;
		height:200px;
		background:lightblue;
	}

	.cur{
		border:solid 2px blue;
		margin-left:100px;
	}


	</style>
</head>
<body>
	<div id='dv'><span style='color:red'>hello world</span></div>

	<div></div>
	<script type="text/javascript">
	//获取元素
	var dv = document.getElementById('dv');
	//属性的操作
		//添加属性
		dv.setAttribute('love','loveyou');
		//获取属性值
		var str = dv.getAttribute('love');
		//移除属性
		dv.removeAttribute('love');

	//文本的操作
		//innerHTML  
		var ine = dv.innerHTML;
		//textContent
		var tex = dv.textContent;

		//改变文本
		//可以解析html标签
		dv.innerHTML = '<span style="color:green">hello world</span>';
		//不可以进行解析标签
		dv.textContent = '<span style="color:green">hello world</span>';
	//修改样式
		var divs = document.getElementsByTagName('div');

		divs[1].style.width = '200px';
		divs[1].style.height = '200px';
		divs[1].style.background = 'orange';

		dv.onmouseover = function()
		{
			// divs[1].setAttribute('class','cur');
			//添加类名
			divs[1].className = 'cur';
		}

		dv.onmouseout = function()
		{
			// divs[1].removeAttribute('class');
			//移除类名
			divs[1].className = '';
		}


		//console.log(tex);


	


	</script>

</body>
</html>